<template>
    <!-- 笔记 -->
    <div class="app-container">
        <el-row class="note" v-for="item in notes" :key="item.id" >
            <div class="note-title">{{ item.title }}</div>
            <el-divider class="note-divider" content-position="left">2020-01-19</el-divider>
            <div class="note-abs">{{ item.abs }}</div>
            <img class="note-img" :src="item.thumbnail" />
            <el-divider />
        </el-row>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                notes: [
                    {
                        id: 1,
                        title: '项目简介',
                        abs: '白卷是一个简单的前后端分离项目，主要采用Vue.js + SpringBoot 技术栈进行开发。',
                        thumbnail: 'https://i.loli.net/2019/04/10/5cada7e73d601.jpg'
                    },
                    {
                        id: 2,
                        title: '爱你一万年',
                        abs: '白卷是一个简单的前后端分离项目，主要采用Vue.js + SpringBoot 技术栈进行开发。',
                        thumbnail: 'https://i.loli.net/2019/04/10/5cada7e73d601.jpg'
                    },
                    {
                        id: 3,
                        title: '凉风有兴',
                        abs: '白卷是一个简单的前后端分离项目，主要采用Vue.js + SpringBoot 技术栈进行开发。',
                        thumbnail: 'https://i.loli.net/2019/04/10/5cada7e73d601.jpg'
                    }
                ]
            }
        }
    }
</script>

<style>
    .app-container {
        width: 70%;
        background: #fff;
        position: absolute;
        margin-top: 50px;
        margin-left: 14%;
    }
    .note {
        padding: 20px 15px;
    }
    .note-title {
        width: 200px;
        text-align: left;
        font-size: 18px;
        font-weight: bold;
    }
    .note-abs {
        width: 1200px;
        font-size: 14px;
        text-align: left;
    }
    .note-img {
        width: 90px;
        height: 110px;
        margin-top: -110px;
        margin-left: 1200px;
    }
    .note-divider {
        width: 1200px;
    }
</style>
